<template>
    <div id="svg" v-html="showSvg(quantity)" class="float-l">
    </div>
</template>

<script>
    export default {
        name: 'figureIcon',
        components: {},
        props: {
            quantity: {
                default: 1
            },
        },
        data: function () {
            return {
                // teachers: [],
                // stars: [],
                // COURSE_LEVEL: COURSE_LEVEL,
            }
        },
        mounted: function () {
            let _this = this;
            // 因为没有权限访问/business/admin/teacher/all
            // 暂时只用默认值。
        },
        methods: {

            showEnrool: function (quantity) {

                if (quantity < 100) {
                    return 1;
                }
                if (quantity >= 100 && quantity < 300) {
                    return 2;
                }
                if (quantity >= 300 && quantity < 700) {
                    return 3;
                }
                if (quantity >= 700 && quantity < 1500) {
                    return 4;
                }
                if (quantity >= 1500 && quantity < 3000) {
                    return 5;
                }
                if (quantity >= 3000 && quantity < 6000) {
                    return 6;
                }
                if (quantity >= 6000 && quantity < 12000) {
                    return 7;
                }
            },

            showSvg: function (quantity) {
                let _this = this;
                let showEnrool = _this.showEnrool(quantity);
                let star = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="album-blue bi bi-person-plus" viewBox="-2 0 20 20">\n' +
                    '                                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>\n' +
                    '                                <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>\n' +
                    '                            </svg>';
                let svg = '';
                for (let i = showEnrool; i > 0; i--) {
                    svg = svg + star ;
                }
                return svg;
            },
        },
    }
</script>


<style scoped>
    .float-l{
        float: left;
    }
</style>